<template>
  <!-- 竞拍市场  我的发布 -->
  <div class="app-container">
    <div class=" search-box">
      <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form-new" label-width="68px">
        <el-form-item label="游戏类型" prop="gameId">
          <el-select v-model="queryParams.gameId" placeholder="请选择游戏" size="small" clearable>
            <el-option v-for="dict in allGameList" :key="dict.id" :label="dict.name" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="bstate">
          <el-select v-model="queryParams.bstate" placeholder="请选择状态" size="small" clearable>
            <el-option v-for="(dict,key) in statusMap" :key="key" :label="dict.label" :value="key" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="账号" prop="account">
          <el-input v-model="queryParams.account" placeholder="请输入账号" clearable size="small" />
        </el-form-item> -->
        <!-- <el-form-item label="简介" prop="des">
          <el-input v-model="queryParams.des" placeholder="请输入关键字" clearable size="small" />
        </el-form-item> -->
        <el-form-item class="btns">
          <el-button type="primary" icon="el-icon-search" size="small" @click="search" class="zdy-btn">搜索</el-button>
          <el-button icon="el-icon-refresh" type="primary" size="small" plain @click="resetQuery" class="zdy-btn zdy-btn-refresh">重置</el-button>
          <el-button icon="el-icon-plus" type="success" @click="addACount" v-if="checkPermi(['jingpaishichang:fabujingpai'])">发布竞拍</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class=" table_box" v-loading="loading">
      <!-- <div class="tip" @click="openUrl('https://imgage.maimaihao.com/videoDoc/%E5%9B%9E%E6%94%B6%E8%81%94%E7%9B%9F%E7%B3%BB%E7%BB%9F%E8%AE%B2%E8%A7%A3.mp4')">不会操作？查看视频教程
        </div> -->
      <el-table :data="tableData.records" style="width: 100%">
        <!-- <el-table-column prop="id" label="ID" width="80"></el-table-column> -->
        <!-- <el-table-column v-if="actived == '已拒收'" prop="rmsg" label="拒收原因" width="120"></el-table-column>
        <el-table-column prop="partition" label="来源" width="80" v-if="pageType == 'lianmeng'">
          <template slot-scope="scope">
            <span v-if="scope.row.partition == 1" style="color: #947f08;">回收链接</span>
            <span v-if="scope.row.partition == 2" style="color: #6f920f;">官网</span>
            <span v-if="scope.row.partition == 3" style="color: #af74ef;">
              三方
            </span>
          </template>
        </el-table-column> -->
        <el-table-column prop="gameName" label="游戏名称" width="150"></el-table-column>
        <el-table-column prop="region" label="区服" width="150"></el-table-column>

        <el-table-column prop="accountNumber" label="游戏账号" width="120"></el-table-column>
        <el-table-column prop="relname" label="实名" width="100"></el-table-column>

        <!-- isAgreeBp -->
        <el-table-column prop="des" label="商品详情" min-width="260">
          <template slot-scope="scope">
            <!-- <el-tooltip class="item" effect="dark" :content="scope.row.des" placement="top-start"> -->
              <div class="zdy-des" @click="openDetail(scope.row.id,'view')">{{ scope.row.des }}</div>
            <!-- </el-tooltip> -->
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="发布时间" width="160"></el-table-column>
        <el-table-column prop="maxCount" label="报价人数" width="100"></el-table-column>
        <el-table-column prop="status" label="状态" width="110">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.bstate==1">已接受报价</el-tag>
            <el-tag type="danger" v-if="scope.row.bstate==2">未接受报价</el-tag>

          </template>
        </el-table-column>
        <el-table-column prop="status" label="回收状态" width="110">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.bstate==1" :type="commonMaps.backStateMap[scope.row.backState||1].type">{{commonMaps.backStateMap[scope.row.backState||1].label}}</el-tag>
            <div v-else>暂无</div>
          </template>
        </el-table-column>
        <!-- <el-tag :type="commonMaps.backStateMap[huishouObj.backState||1].type">{{commonMaps.backStateMap[huishouObj.backState||1].label}}</el-tag> -->
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <!-- goIM -->
            <!-- <el-button type="text" v-if="actived != '待报价'"  @click="goIM(scope.row)">联系</el-button> -->
            <!-- <el-button type="text" style="color:#af0c0c"  @click="refuseLianmeng(scope.row)">拒收</el-button> -->
            <el-button type="text" v-if="scope.row.bstate==1" @click="lijilianxi(scope.row)">立即联系</el-button>
            <el-button type="text" @click="openDetail(scope.row.id,'view')">查看报价</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <div class="pages-box">
      <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList()" />

    </div>
    <jieshouBaojia ref="jieshouBaojia" @close="baojiaClose"></jieshouBaojia>
    <addDialog ref="addDialog" @success="getList()"></addDialog>
     <!-- 联系对方 -->
     <kefuList ref="kefuList"></kefuList>
  </div>
</template>
  
  <script>
import jingpaiApi from "@/api/jingpaishichang/index.js";
import jieshouBaojia from "./components/jieshoubaojia.vue";
import addDialog from "../tenantPages/goodsList/addAndEdit.vue";
import kefuList from "@/components/common/kefuList.vue";
export default {
  name: "",
  components: { jieshouBaojia, addDialog,kefuList },
  props:['openId'],
  data() {
    return {
      loading: false,
      tableData: {
        records: [],
        total: 0,
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        gameId: "",
        bstate: "",
      },
      statusMap: {
        0: {
          type: "success",
          label: "待接受",
        },
        1: {
          type: "success",
          label: "已接受",
        },
        2: {
          type: "warning",
          label: "已拒绝",
        },
      },
    };
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo;
    },
    shopInfo() {
      return this.$store.getters.shopInfo;
    },
    allGameList() {
      return this.$store.getters.allGameList;
    },
  },
  created() {
    // let openId = "";
    // this.$route;
    // console.log("%c Line:145 🍖 this.$route", "color:#4fff4B", this.$route);
    // if (this.$route.query && this.$route.query.openId) {
    //   openId = this.$route.query.openId;
    // }
    this.getList();
  },
  activated() {
    // let openId = "";
    // if (this.$route.query && this.$route.query.openId) {
    //   openId = this.$route.query.openId;
    //   this.$nextTick(() => {
    //     this.openDetail(openId);
    //   });
    // }
  },
  watch: {
    openId: {
      handler(newVal,oldVal) {
        if (
          newVal&&newVal!=oldVal
        ) {
          this.$nextTick(() => {
            this.openDetail(newVal);
          });
        } else {
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    // 联系对方客服
    lijilianxi(row) {
      console.log("%c Line:184 🍑 row", "color:#f5ce50", row);
      // 打开客服列表
      if(row.acceptTenantId){
        this.$refs.kefuList.open(row.acceptTenantId,null,{
          gameId:row.gameId,
          gameName:row.gameName,
        });
      }
      // 
    },
    baojiaClose() {
      // 关闭报价窗口
      if (this.$route.query && this.$route.query.openId) {
        this.$router.replace({
          path: "/huoyuan/jingpailiebiao?tab=fabu"+'&radom=' +
                        Math.random(),
        });
      }
    },
    openUrl(url) {
      window.open(url);
    },
    // 获取列表
    getList(openId) {
      this.loading = true;
      this.queryParams.status = "";
      jingpaiApi
        .backCluemyList({
          ...this.queryParams,
        })
        .then((response) => {
          this.tableData.records = response.rows;
          this.tableData.total = response.total;
          this.loading = false;
          if (openId) {
            this.$nextTick(() => {
              this.openDetail(openId);
            });
          }
        });
    },

    // 发布竞拍商品
    addACount() {
      this.$refs.addDialog.open("jingpai");
    },

    // 搜索
    search() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.getList();
    },
    // 打开详情
    openDetail(id) {
      this.$refs.jieshouBaojia.open(id);
    },

    // 取消回收
    cancelOrder() {
      this.$prompt("请输入取消原因", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /\S/,
        inputErrorMessage: "请输入原因",
        type: "warning",
      })
        .then(({ value }) => {
          //console.log('%c 🥜 value: ', 'font-size:20px;background-color: #465975;color:#fff;', value);
        })
        .catch(() => {});
    },

    //重置
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        gameId: "",
        bstate: "",
      };
      this.getList();
    },
  },
};
</script>
  <style lang="scss" scoped>
  .zdy-des {
    cursor: pointer;
  }
</style>
  